<template>
	<view class="content">
		<view class="navbar" :style="{position:headerPosition}">
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1,synthesis)">
				<text>销量</text>
				<view class="p-box" v-if="filterIndex === 1">
					<uni-icons size="16" type="arrowdown" class="icon" color="#f81149" v-if="synthesis == 1"></uni-icons>
					<uni-icons size="16" type="arrowup" class="icon" color="#f81149" v-else></uni-icons>
				</view>
			</view>

			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2,synthesis)">
				<text>价格</text>
				<view class="p-box" v-if="filterIndex === 2">
					<uni-icons size="16" type="arrowdown" class="icon" color="#f81149" v-if="synthesis == 1"></uni-icons>
					<uni-icons size="16" type="arrowup" class="icon" color="#f81149" v-else></uni-icons>
				</view>
			</view>
		<!-- 	<view class="cate-item filter" @tap="changeSytle">
				<image class="icon-filter" src="../../static/shop/change.png"></image>
			</view> -->
		</view>
		<scroll-view @scrolltolower="lower" scroll-y="true" class="srcoll-content">
			<!-- 精选商品 瀑布流展示-->
			<view class="wrap" v-if="showStyle">
				<view class="good-style-one">
					<view class="list" v-for="(item,index) in goodsCate" :key="item.id">
						<image :src="item.logo" mode=""></image>
						<view class="title">
							{{item.title}}
						</view>
						<view class="price">
							<text>{{item.price_market}}元</text>
							<text>{{item.price_cost}}</text>
						</view>
						<!-- <view class="sale">
							<text>销量</text>
							<text>{{item.number_sales}}</text>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 精选商品展示二 -->
			<view class="good-style-other" v-else>
				<view class="style-content">
					<view class="style-list" @click="jump(`/pages/category/commodity?id=${item.id}`)" v-for="(item,index) in goodsCate"
					 :key="index">
						<view class="img">
							<u-lazy-load :image="item.logo" mode=""></u-lazy-load>
							<view class="triangle"></view>
						</view>
						<view class="detail">
							<view class="title">
								{{ item.title }}
							</view>
							<view class="price">
								<view class="shop-price">
									￥{{ item.price_market }} <text>￥{{ item.price_cost }}</text>
								</view>
								<view class="purchase">
									购买
								</view>
							</view>
							<!-- <view class="sale">
								<text>销量</text>
								<text>{{item.number_sales}}</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<u-loadmore bg-color="transparent" margin-bottom="20" margin-top="20" :status="status" @loadmore="loadmore"/>
		</scroll-view>
	</view>
</template>

<script>
	import service from '@/store/service.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons,
			uniLoadMore
		},
		data() {
			return {
				status: 'loadmore',
				showStyle:true,
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				cateMaskState: 0, //分类面板展开状态
				headerPosition: "fixed",
				loadingType: 0, //加载更多状态
				filterIndex: 1,
				synthesis: 1,
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				goodsCate: [],
				sid: 0,
				keyword:'',
				currentPage:1,
				total:0,
				storeDetail:'',
			};
		},

		onLoad(options) {
			this.keyword = options.keyword
			this.sid = options.tid
			this.cateId = options.tid;
			this.loadCateList(options.fid, options.sid);
			this.loadData();
			this.getGoodsCate();
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.getGoodsCate()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},0)
		},
		//加载更多
		onReachBottom() {
			console.log('loadmore');
		},
		methods: {
			lower(){
				console.log('lower');
				if(this.goodsCate.length<this.total){
					this.currentPage++
					this.getMoreList()
				}else{
					this.status = 'nomore'
				}
			},
			//上拉获取数据
			getMoreList(){
				if (this.synthesis == 1) {
					var order = 'desc';
				} else {
					var order = 'asc';
				}

				if (this.filterIndex == 1) {
					var sort = 'sales';
				} else {
					var sort = 'price';
				}
				this.$http.post(service.api.category.goodList, {
					page:this.currentPage,
					cate_ids: this.sid,
					'order': order,
					'sort': sort,
					keywords: this.keyword
				}).then(res=>{
					if(res.code === 1){
						this.goodsCate = this.goodsCate.concat(res.data.data)
						 this.currentPage = res.data.current_page
						uni.stopPullDownRefresh()
						console.log(this.goodsCate);
					}else{
						this.$api.msg(res.info)
					}

				})
			},
			// 点击加载更多
			loadmore(){
				console.log('loadmore');
				console.log(this.goodsCate.length);
				console.log(this.total);
				if(this.goodsCate.length<this.total){
					this.currentPage++
					this.getMoreList()
				}else{
					this.status = 'nomore'
				}
			},
			jump(url, id, tid) {
				uni.navigateTo({
					url: url
				});
			},
			jumpUrl(url) {
				uni.switchTab({
					url: url
				});
			},
			jumpTo(id) {
				uni.navigateTo({
					url:'../business/store'
				})
			},
			changeSytle(){
				this.showStyle=!this.showStyle
			},
			getSearchList(value) {
				this.$http.post(service.api.category.goodList, {
					keywords: value
				}).then(res => {
					this.goodsCate = res.data.data
					console.log(this.goodsCate, 55);
				})
			},
			//排序点击
			tabClick(index, idx) {
				console.log(index,'index');
				console.log(this.page,'page');
				if (this.filterIndex === index) {
					if (idx == 1) {
						this.synthesis = 0;
					} else {
						this.synthesis = 1;
					}

				} else {
					this.filterIndex = index;
					this.synthesis = 1;
				}

				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
				this.loading();
			},
			loading() {
				this.isLoading = false;
				this.scroll = false;
				this.pages = 1;
				this.currentPage = 1;
				this.out = 0;
				this.goodsCate = [];
				this.getGoodsCate();
			},
			getGoodsCate() {
				var self = this;
				if (self.synthesis == 1) {
					var order = 'desc';
				} else {
					var order = 'asc';
				}

				if (self.filterIndex == 1) {
					var sort = 'sales';
				} else {
					var sort = 'price';
				}
				self.$http.post(service.api.category.goodList, {
					page:self.currentPage,
					cate_ids: self.sid,
					'order': order,
					'sort': sort,
					keywords: self.keyword
				}).then(function(res) {
					self.currentPage = res.data.current_page
					self.total = res.data.total
					var list = res.data.data;
					self.goodsCate = list;
				});
			},
			//加载分类
			async loadCateList(fid, sid) {
				let list = this.goodsCate;
				let cateList = list.filter(item => item.pid == fid);

				cateList.forEach(item => {
					let tempList = list.filter(val => val.pid == item.id);
					item.child = tempList;
				})
				this.cateList = cateList;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 2) {
						return;
					}
					this.loadingType = 1;
				} else {
					this.loadingType = 0
				}

				let goodsList = this.goodsList;
				if (type === 'refresh') {
					this.goodsList = [];
				}
				//筛选，测试数据直接前端筛选了
				if (this.filterIndex === 1) {
					goodsList.sort((a, b) => b.sales - a.sales)
				}
				if (this.filterIndex === 2) {
					goodsList.sort((a, b) => {
						if (this.priceOrder == 1) {
							return a.price - b.price;
						}
						return b.price - a.price;
					})
				}

				this.goodsList = this.goodsList.concat(goodsList);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.goodsList.length > 20 ? 2 : 0;
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},

			//分类点击
			changeCate(item) {
				console.log(item)
				this.cateId = item.id;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
			},
			//详情
			navToDetailPage(gid) {
				//测试数据没有写id，用title代替
				let id = gid;
				uni.navigateTo({
					url: `/pages/category/commodity?id=${gid}`
				})
			}
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// let isLoding=true
			// if(isLoding){
			// 	this.addRandomData();
			// 	isLoding=false
			// }
			// 模拟数据加载
			// setTimeout(() => {
			// 	this.addRandomData();
			// 	this.loadStatus = 'loadmore';
			// }, 1000)
		},
		// 瀑布流模拟数据
		addRandomData() {
			this.flowList.push(...this.list);
		}
	}
</script>
 
<style lang="scss">
	/dee/ .u-more-text{
		background-color: transparent;
	}
	.icon-up {
		height: 20upx;
		width: 20upx;
	}

	.icom-down {
		height: 20upx;
		width: 20upx;
	}

	page,
	.content {
		background: #f8f8f8;
	}

	.content {
		padding-top: 96upx;
	}
	.srcoll-content{
		height: calc(100vh - 184rpx);
		overflow: auto;
	}

	.navbar {
		position: fixed;
		left: 0;
		top: calc(var(--status-bar-height) + 88upx);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;
		justify-content: space-around;

		.nav-item {
			// flex: 1;
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			position: relative;
			font-size: 24upx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);

			&.current {
				color: #f81149;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #f81149;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: #f81149;
				}
			}

			.icon-up {}


		}


		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			// width: 80upx;
			position: relative;
			font-size: 44upx;


		}

		// 筛选的样式
		.filter {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			font-weight: 500;
			flex-wrap: nowrap;
			color: rgba(153, 153, 153, 1);

			.icon-filter {
				height: 24upx;
				width: 24upx;
				margin-top: 5upx;
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
			padding-top: 61upx;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			font-size: 30upx;
			font-size: 24upx;
			font-weight: 500;
			color: rgba(101, 101, 101, 1);
		}

		.children-content {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			padding: 10upx;

			.children-list {
				width: 32.3333%;
				height: 101upx;
				border-radius: 5upx;
				text-align: center;
				padding: 10upx;
				box-sizing: border-box;

				.cl {
					height: 100%;
					width: 100%;
					line-height: 81upx;
					background: rgba(239, 239, 239, 1);
				}

			}
		}

		.active {
			color: #f81149;
		}
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		// background: #fff;

		.goods-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			background: #fff;
			margin-top: 15rpx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3upx;
			overflow: hidden;
			border-radius: 10upx 10upx 0px 0upx;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 26upx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.price-box {
			display: flex;
			align-items: center;
			padding-right: 10upx;
			font-size: 24upx;
			color: #909399;

			.old-price {
				text-decoration: line-through;
			}
		}

		.price {
			font-size: 32upx;
			color: #f81149;
			line-height: 1;
			font-weight: bold;

			&:before {
				content: '￥';
				font-size: 26upx;
				font-weight: bold;
			}
		}

		.old-price {
			margin-left: 29upx;
		}
	}
	.wrap {
		background-color: #f3f3f3;
		.good-style-one{
			// height: 1000rpx;
			width: 100%;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.list{
				// height: 480rpx;
				width: 330rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				>image{
					height: 250rpx;
					width: 100%;
				}
				.title{
					font-size: 28rpx;
					font-weight: bold;
					line-height: 35rpx;
					white-space: normal;
					   overflow: hidden;
					   text-overflow: ellipsis;
					   display: -webkit-box;
					   -webkit-line-clamp: 3;
					   -webkit-box-orient: vertical;
					   word-break: break-all;
				}
				.price{
					& text:first-child{
						font-size: 30rpx;
						font-weight: bolder;
						color: #FF9A36;
					}
					& text:last-child{
						font-size: 26rpx;
						text-decoration: line-through;
						font-weight: 600;
						color: rgba(0,0,0,.6);
						margin-left: 20rpx;
					}
				}
				.sale{
					margin-top: -10rpx;
					& text:first-child{
						font-size: 28rpx;
						font-weight: bolder;
					}
					& text:last-child{
						font-size: 26rpx;
						font-weight: 600;
						color: rgba(0,0,0,.6);
						margin-left: 20rpx;
					}
				}
			}
		}
	}
	
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		// font-size: 30rpx;
		margin-top: 5px;
		// color: $u-main-color;
		// padding: 10rpx 30rpx 0;
		font-size: 26rpx;
		color: $uni-text-color;
		font-weight: bold;
		line-height: 1.4;
		white-space: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #f81149;
		display: flex;
		align-items: center;
	
		>text {
			color: #999999;
			font-size: 20rpx;
			padding-left: 10rpx;
			text-decoration: line-through;
		}
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
	.good-style-other {
		width: 100%;
		padding: 0 20rpx 20rpx;
		background-color: #F3F3F3;
						.sale{
							& text:first-child{
								font-size: 26rpx;
								color: rgba(0,0,0,.6);
								font-weight: 600;
								margin-left: 30rpx;
							}
							& text:last-child{
								font-size: 24rpx;
								font-weight: 500;
								color: rgba(0,0,0,.6);
								margin-left: 20rpx;
							}
						}
	
		.goods-header {
			color: #262626;
			font-size: 34rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	
		.style-content {
			width: 100%;
			padding: 10rpx;
			// background-color: #FFFFFF;
	
			.style-list {
				background-color: #FFFFFF;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100%;
				position: relative;
				border-bottom: 1px solid #E7E7E7;
				margin-bottom: 20rpx;
				padding-bottom: 10rpx;
				padding: 20rpx;
	
				.img {
					height: 180rpx;
					width: 180rpx;
	
					>image {
						height: 100%;
						width: 100%;
					}
				}
	
				.detail {
					height: 100%;
					width: 480rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
	
					.title {
						padding: 10rpx 30rpx 0;
						font-size: 26rpx;
						color: $uni-text-color;
						font-weight: bold;
						line-height: 1.4;
						white-space: normal;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						word-break: break-all;
					}
	
					.price {
						height: 58rpx;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
	
						.shop-price {
							padding-left: 23rpx;
							font-size: 36rpx;
							font-weight: bold;
							color: #f81149;
							display: flex;
							align-items: center;
	
							>text {
								color: #999999;
								font-size: 20rpx;
								padding-left: 10rpx;
								text-decoration: line-through;
							}
						}
	
						.purchase {
							border: 1px solid #f81149;
							color: #f81149;
							width: 120rpx;
							text-align: center;
							font-size: 26rpx;
							margin-bottom: 5rpx;
						}
					}
				}
			}
		}
	}
</style>
